<script>
import {Toast} from "vant";

export default {
  name: "WWorkOrderXQView",
  data() {
    return {
      list: {},
      active: 0,
      logList: [],
      statusList: [],
      logList1: [],
      statusList1: [],
      // logList1: [
      //   {
      //     id: 1,
      //     time: '2020.10.13 09:30:20',
      //     content: '修改完成时间',
      //     operator: '张三',
      //     note: '设备未到货',
      //     completed: false
      //   },
      //   {
      //     id: 2,
      //     time: '2020.10.13 09:30:20',
      //     content: '执行转单操作',
      //     operator: '张三',
      //     completed: true
      //   },
      //   {
      //     id: 3,
      //     time: '2020.10.13 09:30:20',
      //     content: '未完成',
      //     operator: '李四',
      //     completed: false
      //   }
      // ],
      // logList: [
      //   {
      //     id: 1,
      //     time: '2023-11-11 06:32:11',
      //     type: '设备修复',
      //     reportNumber: '202301231231',
      //     workOrderNumber: '202301231231',
      //     repair: true
      //   },
      //   {
      //     id: 2,
      //     time: '2023-11-11 16:32:11',
      //     type: '设备故障',
      //     reportNumber: '202301231231',
      //     warning: true
      //   },
      //   {
      //     id: 3,
      //     time: '2023-11-01 16:32:11',
      //     type: '设备保养',
      //     workOrderNumber: '202301231231',
      //     maintenance: true
      //   },
      //   {
      //     id: 4,
      //     time: '2023-10-01 16:32:11',
      //     type: '新增设备',
      //     add: true
      //   }
      // ],
      // statusList: [
      //   {
      //     name: '1#-1F-A',
      //     completed: '未完成',
      //     status: 3,
      //   },
      //   {
      //     name: '1#-1F-B',
      //     completed: '已完成',
      //     status: 1
      //   },
      //   {
      //     name: '1#-1F-C',
      //     completed: '已完成',
      //     status: 2
      //   },
      //   {
      //     name: '1#-2F-A',
      //     completed: '已完成',
      //     status: 1
      //   }
      // ],
      // statusList1: [
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '未完成',
      //     status: 3
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '已完成',
      //     status: 1
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层消防通道1位',
      //     completion: '已完成',
      //     status: 2
      //   },
      //   {
      //     location: '浙大森林A栋1号楼1层环境传感器',
      //     temperature: '28°C',
      //     status: 1
      //   }
      // ],
      show: false,
      // columns: ['张三', '李四', '王五', '赵六'],
      //备注
      remark: '',
      show1: false,
      pingfen:0,
      pinglun:'',
      add:{},
      guanbi:false,
    };
  },
  created() {
    // 获取参数
    this.id = this.$route.query.id
    // 查询
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/findById?id=` + this.id).then(res => {
      this.list = res.data.data;
      console.log(res)
      console.log(this.list)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/smqzAll`).then(res => {
      this.logList = res.data.data;
      console.log(this.logList)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/gdrzAll`).then(res => {
      this.logList1 = res.data.data;
      console.log(this.logList1)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/wbdwAll`).then(res => {
      this.statusList = res.data.data;
      console.log(this.statusList)
    })
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/xjdwAll`).then(res => {
      this.statusList1 = res.data.data;
      console.log(this.statusList1)
    })
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    handleTicket(id) {
      this.$router.push({path: '/workorderwbx', query: {id: id}})
    },
    history() {
      this.$router.push({path: '/workorderhistory'})
    },
    //打开派单弹窗
    // showPopup() {
    //   this.add = {}
    //   this.show = true;
    // },
    // //选择派单人
    // onChange(picker, value, index) {
    //   this.add.processor = value
    //   console.log(`当前值：${value}, 当前索引：${index}`);
    //   console.log(this.add)
    // },
    //备注
    // remarks() {
    //   this.add.remarks = this.remark
    //   console.log(this.remark)
    //   console.log(this.add)
    // },
    //打开评论弹窗
    // show1Popup() {
    //   this.show1 = true;
    // },
    //评论
    // pingLun(){
    //   this.add.pinglun = this.pinglun
    //   console.log(this.pinglun)
    //   console.log(this.add)
    // },
    //评分
    // pingFen(){
    //   this.add.pingfen = this.pingfen
    //   console.log(this.pingfen)
    //   console.log(this.add)
    // },
    // //派单
    // add1() {
    //   console.log(this.add)
    //   this.show = false;
    // },
    //关闭(后补状态变更)
    // guanbi11(){
    //   this.guanbi = false;
    //   this.$router.push({path: '/workorder'})
    // },
    // //打开关闭弹窗
    // guanbi1(){
    //   // this.$router.push({path: '/workorder'})
    //   this.guanbi = true;
    // },
    //处理
    chuli(id){
      this.$router.push({path: '/wo-de/chuli', query: {id: id}})
    },
    //转单
    zhuandan(id){
      this.$router.push({path: '/wo-de/zhuan', query: {id: id}})
    },
    //报价
    baojia(id){
      this.$router.push({path: '/wo-de/baojia', query: {id: id}})
    },
    //挂单
    guadan(id){
      this.$router.push({path: '/wo-de/guadan', query: {id: id}})
    },
    //跳转摄像头
    sxt(){
      this.$router.push({path: '/sxt'})
    },
    //备注
    beizhu(id){
      console.log(id)
      this.$router.push({path: '/workorderbeizhu', query:{id:id}})
    },
    //报修
    baoxiu(){
      this.$router.push({path: '/workorderbaoxiu'})
    },
    //取消挂单
    quxiaoguadan(){
      this.list.gdstatus = 1;
      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/save`, this.list).then(res => {
        if (res.data.code == 1) {
          Toast.success('取消挂单成功');
        } else {
          Toast.fail('取消挂单失败');
        }
      })
    }
  },

}
</script>

<template>
  <div>
    <van-nav-bar
        title="详情"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <div>
      <h4>占位</h4>
      <h4 class="title">基本信息</h4>
      <div class="info">
        <p>维保编号：{{list.workOrderNumber}}</p>
        <p>维保类型：{{list.workOrderType==1?"维修":list.workOrderType==2?"维保":"巡检"}}</p>
        <p>处理人：{{list.processor}}</p>
        <p>检查时间：{{list.workOrderChecktime}}</p>
        <p>创建时间：{{list.workOrderCreatetime}}</p>
        <p>{{list.status==1?"普通":list.status==2?"紧急":"特急"}}</p>
        <h4 v-if="list.workOrderType==1"><a @click="history()">历史报价</a></h4>
        <van-button v-if="list.workOrderType!=1" type="info" size="small" @click="beizhu(list.workOrderId)">备注</van-button>
        <van-button v-if="list.workOrderType==3" type="info" size="small" @click="baoxiu()">报修</van-button>
<!--        <van-button v-if="list.workOrderType==1" type="info" size="small" @click="showPopup()" >派单</van-button>-->
<!--        <van-button v-if="list.workOrderType==1" type="danger" size="small" @click="guanbi1">关闭</van-button>-->
      </div>
<!--      <div><van-popup v-model="show" class="operation-log">-->
<!--        <h4>派单</h4>-->
<!--        <div>-->
<!--          <van-picker-->
<!--              title="选择派单人"-->
<!--              show-toolbar-->
<!--              confirm-button-text=" "-->
<!--              cancel-button-text=" "-->
<!--              :columns="columns"-->
<!--              @change="onChange"-->
<!--          />-->
<!--        </div>-->
<!--        <div>-->
<!--          <van-field placeholder="请输入备注" v-model="remark" @change="remarks">-->
<!--            <template slot="label" >-->
<!--              备注-->
<!--            </template>-->
<!--          </van-field>-->
<!--        </div>-->
<!--        <van-button @click="show = false">取消</van-button>-->
<!--        <van-button @click="add1">确定</van-button>-->
<!--        <van-button type="primary" size="large" @click="show1Popup">评论</van-button>-->

<!--        <van-popup v-model="show1" class="operation-log">-->
<!--          <h4>评论</h4>-->
<!--          <div>-->
<!--            <h5>您对该工单的处理满意吗？</h5>-->
<!--            <van-rate v-model="pingfen" allow-half void-icon="star" void-color="#eee"  color="#ffd21e" @change="pingFen" />-->
<!--            <van-field placeholder="请输入评论内容" v-model="pinglun" @change="pingLun">-->
<!--              <template slot="label" >-->
<!--                评论内容-->
<!--              </template>-->
<!--            </van-field>-->
<!--          </div>-->
<!--        </van-popup>-->
<!--      </van-popup>-->
<!--        <van-popup v-model="guanbi" class="operation-log">-->
<!--          是否关闭工单？-->
<!--          关闭后不可再次修改！-->
<!--          <van-button type="danger" size="large" @click="guanbi=false">返回</van-button>-->
<!--          <van-button type="danger" size="large" @click="guanbi11">确定</van-button>-->
<!--        </van-popup>-->
<!--      </div>-->
    </div>

    <div v-if="list.workOrderType==1" class="info">
      <p>设备ID: 测试{{list.shebeiId}}</p>
      <p>设备名称: 测试{{list.shebeiName}}</p>
      <p>设备位置: 测试{{list.shebeiaddress}}</p>
    </div>
    <div v-if="list.workOrderType==1">
      <van-tabs v-model="active">
        <van-tab title="生命周期">
          <van-steps direction="vertical" :active="0">
            <van-step v-for="item in logList" :key="logList.id">
              <p>{{ item.time }}</p>
              <p>{{ item.type }}</p>
              <p v-if="item.reportNumber">告警编号: {{ item.reportNumber }}</p>
              <p v-if="item.workOrderNumber">工单编号: {{ item.workOrderNumber }}</p>
            </van-step>
          </van-steps>
        </van-tab>

        <van-tab title="工单日志">
          <van-steps direction="vertical" :active="0">
            <van-step v-for="item in logList1" :key="logList1.id">
              <span class="log-time">{{ item.time }}</span><p></p>
              <span class="log-content">{{ item.content }}</span>
              <span class="log-operator">操作人: {{ item.operator }}</span><p></p>
              <span class="log-note" v-if="item.note">{{ item.note }}</span>
            </van-step>

          </van-steps>

        </van-tab>

      </van-tabs>
          <van-button type="info" size="normal" @click="chuli(list.workOrderId)" >处理</van-button>
<!--          <van-button type="info" size="normal" @click="baojia(list.workOrderId)">报价</van-button>-->
          <van-button v-if="list.gdstatus==1" type="info" size="normal" @click="guadan(list.workOrderId)">挂单</van-button>
          <van-button v-if="list.gdstatus==2" type="danger" size="normal" @click="quxiaoguadan()">取消挂单</van-button>
          <van-button type="info" size="normal" @click="zhuandan(list.workOrderId)">退回</van-button>
    </div>

    <p class="info">{{list.workOrderType==2?"维保点位":list.workOrderType==3?"巡检点位":""}}</p>
    <div class="status-container" v-if="list.workOrderType==2">
      <div class="status-item" v-for="(item, index) in statusList" :key="index">
        <van-icon name="location-o" />
        <span>{{ item.name }}</span>
        <span>{{ item.completed }}</span>
        <span :class="item.status === 'normal'? 'status-normal' : 'status-abnormal'">

          <div class="ticket-actions">
            <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>
            <van-button v-if="item.status ==1" square type="primary" size="small" >{{ item.status ==1? '正常' : item.status==2? '异常' : '扫描二维码' }}</van-button>
            <van-button v-if="item.status ==3" square type="primary" size="small" @click="sxt">扫描二维码</van-button>
          </div>

      </span>

      </div>
      <van-button @click="onBack" type="info" size="large" >返回</van-button>
    </div>
    <div class="device-status" v-if="list.workOrderType==3">
      <div class="status-item" v-for="(item, index) in statusList1" :key="index">
        <van-icon name="location-o" />
        <span class="device-location">{{ item.location }}</span>
        <span class="completion-status">{{ item.completion }}</span>
        <!--          <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>-->
        <span v-if="item.status === 'normal'" class="status-normal">
          <van-icon name="checkmark" color="green" />
          </span>
        <!--            <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>-->
        <van-icon name="warning-o" color="yellow" />

        <span v-if="item.temperature" class="temperature-status">
          温度：<span class="temperature-value">{{ item.temperature }}
            </span>
          </span>

        <div class="ticket-actions">
          <van-button v-if="item.status ==2" square type="primary" size="small" @click="handleTicket(list.workOrderId)">{{ item.status ==1? '正常' : '异常' }}</van-button>
          <van-button v-if="item.status ==1" square type="primary" size="small" >{{ item.status ==1? '正常' : '异常' }}</van-button>
          <van-button v-if="item.status ==3" square type="primary" size="small" @click="sxt">扫描二维码</van-button>
        </div>

      </div>
      <van-button @click="onBack" type="info" size="large" >返回</van-button>
    </div>

  </div>
</template>

<style scoped>
.info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  font-size: 10px;
  text-align: left;
}
.operation-log {
  padding: 20px;
}
.log-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.log-time {
  margin-right: 10px;
}
.log-content {
  margin-right: 10px;
}
.log-operator {
  margin-right: 10px;
}
.log-note {
  margin-right: 10px;
}
.log-status {
  margin-left: auto;
}
.equipment-log {
  padding: 20px;
}
.log-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.log-time {
  margin-right: 10px;
}
.log-type {
  margin-right: 10px;
}
.log-warning {
  margin-right: 10px;
}
.log-maintenance {
  margin-right: 10px;
}
.log-add {
  margin-right: 10px;
}
.log-repair {
  margin-right: 10px;
}
.log-report-number {
  margin-right: 10px;
}
.log-work-order-number {
  margin-right: 10px;
}
.status-container {
  display: flex;
  flex-direction: column;
}
.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.status-normal {
  color: green;
}
.status-abnormal {
  color: yellow;
}
.device-status {
  padding: 20px;
}
.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.device-location {
  margin-right: 10px;
}
.completion-status {
  margin-right: 10px;
}
.status-normal {
  margin-right: 10px;
}
.status-abnormal {
  margin-right: 10px;
}
.temperature-status {
  margin-right: 10px;
}
.temperature-value {
  margin-right: 5px;
}
.title {
  text-align: left;
}
.operation-log {
  width: 70%;
  height: 50%;
}
</style>